<template>
    <div class="desk">
        <van-nav-bar title="收银台" left-text="返回" left-arrow safe-area-inset-top @click-left="onClickLeft" />
        <div class="main">
            <span>￥{{ rushStore.commitList[0]?rushItem.price:store.totalMoney }}</span>
        </div>
        <van-divider />
        <van-radio-group v-model="checked">
            <van-cell-group inset>
                <van-cell title="微信支付" clickable @click="checked = '1'">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="支付宝支付" clickable @click="checked = '2'">
                    <template #right-icon>
                        <van-radio name="2" />
                    </template>
                </van-cell>
                <van-cell title="农业银行储蓄卡(1234)" clickable @click="checked = '3'">
                    <template #right-icon>
                        <van-radio name="3" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
        <van-tabbar v-model="active" fixed>
            <van-button round type="success" style="width: 100%;"  @click="$router.push('/commitFinish')">确认支付￥{{rushStore.commitList[0]?rushItem.price:store.totalMoney}}</van-button>

        </van-tabbar>
    </div>
</template>

<script setup>
import { Dialog } from 'vant';
import { ref } from 'vue';
import 'vant/es/dialog/style';
import { useRouter, useRoute } from 'vue-router'
import useCartStore from '../../store/cart';
import useMenuStore from '../../store/menu';
const store = useCartStore()
const rushStore=useMenuStore()
const checked=ref('1')
const router = useRouter()
const rushItem=rushStore.commitList[0]
const onClickLeft = () => {
    Dialog.confirm({
        title: '确定放弃支付吗',
        message:
            '订单将在20分钟内未支付被取消，请尽快完成支付',
    })
        .then((res) => {
            console.log(res)
            rushStore.removeGoods()
            rushStore.check=false
            router.back()
        })
        .catch((res) => {
            console.log(res)
            return
        });
}
</script>

<style  lang="less" scoped>
.main {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: green;

    span {
        color: white;
        font-size: 30px;
    }

}
</style>
